<template>
  <div class="class-list-view" v-loading="loading">
    <main class="table-wrapper table-container">
      <div class="table-content">
        <el-table
          :data="classList"
          stripe
          border
          header-cell-class-name="table-header"
          class="responsive-table"
        >
          <el-table-column
            label="序号"
            prop="sort"
            align="center"
          ></el-table-column>
          <el-table-column
            label="班级"
            prop="F_name"
            align="center"
          ></el-table-column>
          <el-table-column
            label="学生人数"
            prop="F_student_num"
            align="center"
          ></el-table-column>
          <el-table-column
            label="教师人数"
            prop="F_teacher_num"
            align="center"
          ></el-table-column>
          <el-table-column label="编辑" prop="" align="center">
            <template #default="scope">
              <span class="btn" @click="toEditClass(scope.row)">编辑</span>
              <span class="btn" @click="toDeleteClass(scope.$index, scope.row)"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>
    <footer class="footer">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="classTotal"
        @current-change="changePage"
        v-model:current-page="page"
      >
      </el-pagination>
    </footer>
    <edit-class
      v-if="showEditClass"
      :classId="classItem.F_id"
      @update="updateEdit"
    ></edit-class>
    <AddClass
      v-if="showAddClass"
      @update="updateEdit"
      :initGradeId="gradeId"
      :classTotal="classTotal"
    />
  </div>
</template>
<script>
import EditClass from './edit-class.vue';
import AddClass from './AddClass.vue';
import eventBus from '@/utils/eventBus';
import { mapGetters } from 'vuex';

export default {
  name: 'ClassListView',
  components: {
    EditClass,
    AddClass,
  },
  props: {
    gradeId: { type: Number, required: true },
  },
  data() {
    return {
      loading: false,
      page: 1,
      classList: [],
      classTotal: 0,
      classItem: {},
      showEditClass: false,
      showAddClass: false,
    };
  },
  computed: {
    ...mapGetters('school', ['schoolId']),
  },
  watch: {
    gradeId() {
      this.getClasses();
    },
  },
  mounted() {
    this.getClasses();
    eventBus.$on('to-add-class', () => {
      this.showAddClass = true;
    });
  },
  methods: {
    async getClasses() {
      if (this.gradeId === 0) return;
      this.loading = true;
      const res = await this.$api.getClasses({
        F_school_id: this.schoolId,
        F_grade: this.gradeId,
        F_page: this.page,
        F_limit: 10,
      });
      this.loading = false;
      this.classList = res.F_classes;
      this.classTotal = res.F_total;
    },
    changePage(val) {
      this.page = val;
      this.getClasses();
    },
    addClass() {
      this.showAddClass = true;
    },
    toEditClass(item) {
      this.classItem = item;
      this.showEditClass = true;
    },
    updateEdit() {
      this.showEditClass = false;
      this.showAddClass = false;
      this.getClasses();
    },
    async toDeleteClass(index, item) {
      this.$delete(item.F_name, async () => {
        try {
          const { F_responseNo, F_responseMsg } = await this.$api.deleteClass({
            F_school_id: this.schoolId,
            F_class_id: item.F_id,
          });
          if (F_responseNo === 10000) {
            this.$toast('删除班级成功', 1000);
            // 判断当前删除的项是最后一项，且是最后一页的第一个，此时需page-1
            if (
              index === 0 &&
              this.classTotal % 10 === 1 &&
              this.classTotal !== 1 &&
              this.page === Math.ceil(this.classTotal / 10)
            )
              this.page = this.page - 1;
            this.getClasses();
          } else this.$toast(`删除班级失败:${F_responseMsg}`, 1500);
        } catch (e) {
          console.error(e);
          this.$toast('删除班级失败', 1000);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.class-list-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  .table-wrapper {
    flex: 1;
  }

  .footer {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
